import type { SoElements } from '../../../../../../../../types/constants/personalization/so'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  AppStyleCollections,
  generateHideSelector,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SoCommonPage } from './common'

export class SoIndexVideoPage {
  elements: SoElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.SO]
  private static instance: SoIndexVideoPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly commonPage: SoCommonPage = SoCommonPage.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): SoIndexVideoPage {
    if (!SoIndexVideoPage.instance) {
      SoIndexVideoPage.instance = new SoIndexVideoPage()
    }
    return SoIndexVideoPage.instance
  }

  init(): void {
  }

  hideSearchStyles(): string {
    return `
    .so-search__input.has-sug {
      border-radius: 10px 0 0 10px !important;
      border-bottom: 2px solid #0fb264 !important;
    }
    
    .so-suggest {
      display: none !important;
    }
    `
  }

  getMainStyles(): string {
    return `
  /* 隐藏样式 */
  #app .so-nav-container:has(${generateHideSelector('li.so-nav-container__item')}):has(${generateHideSelector('li.so-nav-container__append-right')}) {
    background: transparent !important;
  }
  #app .so-nav-container:has(${generateHideSelector('li.so-nav-container__append-right')}) {
    ul {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      padding: 0 !important;
    }
  }
  
  /* 搜索历史隐藏、搜索建议隐藏 */
  &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"][${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
    form.so-search__form {
      ${this.hideSearchStyles()}
    }
  }
  /* 搜索历史隐藏、搜索建议显示 */
  &[${AppStyleCollections.Search.attr.HIDE_HISTORY}="true"]:not([${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}]) {
    /* 无搜索建议 */
    form.so-search__form[${AppStyleCollections.Search.attr.IS_SUGGESTIONS_EMPTY}="true"] {
      ${this.hideSearchStyles()}
    }
  }
  /* 搜索历史显示、搜索建议隐藏 */
  &:not([${AppStyleCollections.Search.attr.HIDE_HISTORY}])[${AppStyleCollections.Search.attr.HIDE_SUGGESTIONS}="true"] {
    /* 无搜索历史 */
    form.so-search__form[${AppStyleCollections.Search.attr.IS_HISTORY_EMPTY}="true"] {
      ${this.hideSearchStyles()}
    }
  }

  /* 主样式 */  
  #app {
    background-color: transparent !important;
    
    /* 顶部菜单*/
    .header {
      .so-nav-container {
        background-color: var(${this.themeVarService.search.header.background}) !important;
        
        a {
          color: var(${this.themeVarService.search.default.text}) !important;
        }
        
        li {
          &.so-nav-container__item {
            &:hover {
              a {
                color: var(${this.themeVarService.tab.textHover}) !important;
              }
            }
            
            &.activated-tab {
              border-bottom: 2px solid var(${this.themeVarService.tab.textActive}) !important;

              a {
                color: var(${this.themeVarService.tab.textActive}) !important;
              }
            }
          }
          
          &.so-nav-container__append-right {
            .so-header-menu-item {
              &:hover {
                .so-header-menu-item__title {
                  a {
                    color: var(${this.themeVarService.link.default.text}) !important;
                  }
                }
              }
              
              .so-header-menu-item__submenu {
                background-color: transparent !important;
                box-shadow: none !important;
              }
            }
          }
        }
      }
    }
    
    .body {
      .so-search .so-search__form .so-suggest .so-suggest__item {
        &.history {
          .so-suggest__text {
            color: var(${this.themeVarService.search.history.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }
        }
        
        &.suggest {
          .so-suggest__text {
            &:hover {
              b {
                color: var(${this.themeVarService.link.default.text}) !important;
              }
            }

            b {
              color: var(${this.themeVarService.search.suggestions.text}) !important;
              font-weight: ${this.themeVarService.search.suggestions.fontWeight} !important;
            }
          }
        }
        
        .so-suggest__text {
          font-size: ${this.themeVarService.search.default.fontSize} !important;
          
          &:has(b) {
            color: var(${this.themeVarService.em.text}) !important;
          }
        }
      }
    }
    
    /* 页脚 */
    ${this.commonPage.footStyles()}
  }
`
  }
}
